<template>
  <div class="about">
    <div class="fontTitle">
      <font size="20px"
        >手机 - 诺基亚 -
        <a href="#motoE2" @click.prevent="scrollToMoto">MOTO</a>
        - 索爱</font
      >
    </div>
    <div class="fontTitle">
      <h1>导购资讯</h1>
      <p>
        参观电玩达人的宝贝仓库 <br />
        炎炎夏日，冰凉家具两折起 <br />
        周末折扣，品牌三折热卖
      </p>
      <hr />
      <p style="margin-top: 20px">网游专区</p>
      <ol type="A">
        <li>QQ幻想100点卡只需￥8.8元</li>
        <li>热血江湖250点只需￥8.8元</li>
        <li>问道30元卡只需￥25.0元</li>
        <li>跑跑点卡200点只需￥16.8元</li>
      </ol>
      <p style="margin-top: 10px">数码产品</p>
      <ul>
        <li>最酷音乐手机导购</li>
        <li>最强街机6300仅售1450</li>
        <li>问道30元卡只需￥25.0元</li>
        <li>跑跑点卡200点只需￥16.8元</li>
      </ul>
      <hr />
      <div ref="motoDetailsRef" id="motoE2" style="margin-top: 20px">
        <p>MOTO E2 音乐手机</p>
        <div class="fontEnd">
          <span>130W像素摄像头 Linux智能系统</span>
          <br />
          <span>Intel XScale 处理器</span>
          <br />
          <span>A2DP蓝牙立体声 市场价：1690</span>
          <br />
          <span>开学价：1045</span>
        </div>
      </div>
    </div>
    <div class="endBottom">
      <marquee behavior="alternate" direction="left">
        <p>精品推荐: 超酷PSP NIKE 运动鞋 zip珍藏限量版</p>
      </marquee>
    </div>
    <hr />
    <p style="text-align: left">
      版权信息： Copyright <span>&copy;</span> 1998 - 2007 TENCENT Inc. All
      Rights Reserved
    </p>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, ref } from "vue";

// eslint-disable-next-line vue/no-export-in-script-setup
const showMotoDetails = ref(false);
defineComponent({
  setup() {
    const motoDetailsRef = ref<HTMLElement | null>(null);
    const scrollToMoto = () => {
      if (motoDetailsRef.value) {
        motoDetailsRef.value.scrollIntoView({ behavior: "smooth" });
      }
    };

    return { motoDetailsRef, scrollToMoto };
  },
});
</script>
<style scoped>
.about {
  background-color: rgb(255, 207, 255);
}

.fontTitle {
  text-align: left;
  margin-left: 20px;
  margin-top: 20px;
}

hr {
  margin: 1em 0;
  padding: 0;
  width: 200px;
}

.fontEnd {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 15px;
}

.endBottom {
  margin-top: 20px;
  text-align: center;
}
</style>
